<template>
    <div class="editProfileDetail">
        <div class="moduleHead">
            <span class="center">
                <router-link :to="{ name: 'me' }">
                    <span class="back"></span>
            </router-link>
            <span> {{language.unify_detail}} </span>
            </span>
            <span class="right rightActive" @click="submit">{{language.unify_done}}</span>
        </div>
        <div class="body">
            <dl class="editBox">
                <dt>
                    <!-- Worth -->
                </dt>
                <dd>
                    <label>{{language.unify_income}}</label>
                    <select @change="checkIsGuest" class="selectA" v-model="type">
                        <option v-for="item in incomeList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow"></div>
                </dd>
                <dd>
                    <label>{{language.unify_netWorth}}</label>
                    <select class="selectA" v-model="net_worth">
                        <option v-for="item in netWorthList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow"></div>
                </dd>
            </dl>
            <dl class="editBox">
                <dt>
                    <!-- Appearance -->
                </dt>
                <dd>
                    <label>{{language.unify_height}}</label>
                    <select class="selectA" v-model="height_all">
                        <option v-for="item in heightList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow"></div>
                </dd>
                <dd>
                    <label>{{language.unify_eyes}}</label>
                    <select class="selectA" v-model="eyes">
                        <option v-for="item in eyesColorList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow"></div>
                </dd>
                <dd>
                    <label>{{language.unify_hair}}</label>
                    <select id="eyes" class="selectA" v-model="hair">
                        <option v-for="item in hairColorList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow"></div>
                </dd>
                <dd>
                    <label>{{language.unify_bodyType}}</label>
                    <select id="eyes" class="selectA" v-model="body">
                        <option v-for="item in bodyTypeList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow"></div>
                </dd>
            </dl>
            <dl class="editBox">
                <dt>
                    <!-- Lifestyle -->
                </dt>
                <dd>
                    <label>{{language.unify_occupation}}</label>
                    <select class="selectA" v-model="occupation">
                        <option v-for="item in occupationList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow"></div>
                </dd>
                <dd>
                    <label>{{language.unify_smoking}}</label>
                    <select class="selectA" v-model="smoker">
                        <option v-for="item in smokingList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow"></div>
                </dd>
                <dd>
                    <label>{{language.unify_drinking}}</label>
                    <select class="selectA" v-model="drinker">
                        <option v-for="item in drinkingList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow"></div>
                </dd>
                <dd>
                    <label>{{language.unify_haveChildren}}</label>
                    <select class="selectA" v-model="have_children">
                        <option v-for="item in haveChildrenList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow"></div>
                </dd>
                <dd>
                    <label>{{language.unify_wantChildren}}</label>
                    <select class="selectA" v-model="want_children">
                        <option v-for="item in wantChildrenList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow"></div>
                </dd>
                <dd>
                    <label>{{language.unify_havePets}}</label>
                    <select class="selectA" v-model="pets">
                        <option v-for="item in havepetsList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow"></div>
                </dd>
                <dd>
                    <label>{{language.unify_motorcycle}}</label>
                    <div class="multiple">
                        <div class="multipleHtml">{{motorcycleStr}}</div>
                        <select multiple class="selectA" v-model="motorcycleData">
                            <option v-for="item in motorcycleList" :value="item.value">{{item.label}}</option>
                        </select>
                    </div>
                    <div class="arrow"></div>
                </dd>
                <dd>
                    <label>{{language.unify_ridingHabits}}</label>
                    <select class="selectA" v-model="passenger_type">
                        <option v-for="item in ridingHabitsList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow"></div>
                </dd>
            </dl>
            <dl class="editBox">
                <dt>
                    <!-- Background -->
                </dt>
                <dd>
                    <label>{{language.unify_education}}</label>
                    <select class="selectA" v-model="education">
                        <option v-for="item in educationList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow"></div>
                </dd>
                <dd>
                    <label>{{language.unify_ethnicity}}</label>
                    <select class="selectA" v-model="ethnicity">
                        <option v-for="item in ethnicityList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow"></div>
                </dd>
                <dd>
                    <label>{{language.unify_language}}</label>
                    <div class="multiple">
                        <div class="multipleHtml">{{languagesStr}}</div>
                        <select multiple class="selectA" v-model="languageData">
                            <option v-for="item in languageList" :value="item.value">{{item.label}}</option>
                        </select>
                    </div>
                    <div class="arrow"></div>
                </dd>
                <dd>
                    <label>{{language.unify_politicalBeliefs}}</label>
                    <select class="selectA" v-model="political_beliefs">
                        <option v-for="item in politicalBeliefsList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow"></div>
                </dd>
                <dd>
                    <label>{{language.unify_religion}}</label>
                    <select class="selectA" v-model="religion">
                        <option v-for="item in relationList" :value="item.value">{{item.label}}</option>
                    </select>
                    <div class="arrow"></div>
                </dd>
            </dl>
        </div>
        <loading :props="{type:'page' ,show:loadingAjax}"></loading>
        <publicDialog :props="dialogData"></publicDialog>
    </div>
</template>
<script>
import componentsEditProfileDetail from '../../common/components/EditProfileDetail'
export default {
    name: 'EditProfileDetail',
    extends: componentsEditProfileDetail,
    data() {
        return {
            m_type: '',
            passenger_type: '',
        }
    },
    activated() {
        this.m_type = this.$store.state.user.userInfo.detail.basics.m_type;
        this.passenger_type = this.$store.state.user.userInfo.detail.lifestyle.passenger_type;
    },
    computed: {
        ridingHabitsList() {
            return this.getLocalObj('ms_passenger_type');
        },

        motorcycleList() {
            return this.getLocalObj('ms_m_type');
        },

        motorcycleData: {
            get: function() {
                return this.getMultipleSelectArr(this.m_type, this.motorcycleList);
            },
            set: function(newValue) {
                this.m_type = this.getMultipleSelectValue(newValue);
            }
        },

        motorcycleStr() {
            return this.getMultipleSelectLable(this.motorcycleList, this.m_type, '; ', 30);
        }
    },

    methods: {

        getSubmitData() {
            let submitData = this.initSubmitData();
            submitData.m_type = this.m_type;
            submitData.passenger_type = this.passenger_type;
            return submitData;
        },

        getSetData(result) {
            let setData = this.initSetData(result);
            setData.detail.basics.m_type = result.data.m_type;
            setData.detail.lifestyle.passenger_type = result.data.passenger_type;
            return setData;
        },
    }
}

</script>
